<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
</body>
</html>

<script>

// 案例回顾：
const btns = document.querySelectorAll('button');

// 知识点：1、闭包  2、函数作用域  3、立即执行函数

/* 
  闭包实现
*/
for (var index = 0; index < btns.length; index++) {
  const element = btns[index];

  function say(n) {
    return function() {
      console.log(n);
    }
  }

  // onclick 拿到的是  函数声明的引用 / 不能直接那函数的调用
  element.onclick = say(index);
}


/* 
  bind 实现
*/
// for (var index = 0; index < btns.length; index++) {
//   const element = btns[index];

//   function say(n) {
//     console.log('xxx', n);
//   }

//   // onclick 拿到的是  函数声明的引用
//   element.onclick = say.bind(null, index);
// }

</script>